<script type="x-template" id="paginator">

    <div class="pagination" v-if="totalPages > 1">

        <a class="left" v-if="page > 1" @click="ClickA(page-1)"></a>


        <template v-if="totalPages<=10">
            <a v-for="n in totalPages" v-text="n" :class="{act: n=== page}" @click="ClickA(n)"></a>
        </template>

        <template v-else-if="page<7">
            <a v-for="n in 10" v-text="n" :class="{act: n=== page}" @click="ClickA(n)"></a>

        </template>
        <template v-else-if="page >= totalPages -4">
            <a v-for="n in 10" v-text="totalPages -10 +n" :class="{act: totalPages -10 +n === page}"
               @click="ClickA(totalPages -10 +n)"></a>

        </template>
        <template v-else>
            <a v-for="n in 10" v-text="page - 6 + n" :class="{act: page - 6 + n === page}"
               @click="ClickA(page - 6 + n)"></a>

        </template>

        <a class="right" v-if="page< totalPages" @click="ClickA(page+1)"></a>

    </div>

</script>

<script>
    //创建一个组件
    const Paginator = {
        props: {
            page: {
                type: Number,
                default: 1
            },
            totalPages: {
                type: Number,
                required: true
            }
        },

        methods: {
            ClickA(n) {
                this.$emit('update:page', n);
                this.$emit('click-page'); //调用接口更新数据

            }

        },
        template: '#paginator'

    }


</script>



